<template>
  <!-- 开票申请 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="115px">
          <a-form-item label="状态" :label-col="{ style: { width: '40px' } }" >
            <a-select v-model:value="queryParam.sflx" placeholder="全部" :showArrow="false" :allowClear="true">
              <a-select-option value="1">收入</a-select-option>
              <a-select-option value="2">支出</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="345px">
          <a-form-item label="" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '250px' } }">
            <a-select v-model:value="queryParam.sdate" default-value="0" id="today" style="width: 90px; margin-right: 5px" >
              <a-select-option value="0">出团日期</a-select-option>
              <a-select-option value="1">收付日期</a-select-option>
            </a-select>
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 106px; padding: 4px"
            /> ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 109px; padding: 4px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="145px">
          <a-form-item label="操作人" :label-col="{ style: { width: '55px' } }">
            <JDictSelectTag
              v-model:value="queryParam.userIds"
              mode="multiple"
              dictCode="sys_user,realname,id@authUser"
              placeholder="全部"
              :maxTagCount="0"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :allowClear="true"
            />
          </a-form-item>
        </a-col>

        <a-col flex="170px">
          <a-form-item label="订单号" :label-col="{ style: { width: '55px' } }">
            <a-input placeholder="" v-model:value="queryParam.orderId" ></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" preIcon="ant-design:search" @click="searchQuery" >查询</a-button>
          </span>
        </a-col>
      </a-row>

      <a-row :gutter="8" type="flex">
        <a-col flex="250px">
          <a-form-item label="收款单位" :label-col="{ style: { width: '65px' } }">
            <a-input placeholder="" v-model:value="queryParam.dwmc" ></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="280px">
          <a-form-item label="备注" :label-col="{ style: { width: '65px' } }">
            <a-input placeholder="" v-model:value="queryParam.bz" ></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button color="success" preIcon="ant-design:plus-outlined" @click="auditALLSelect" class="mr-10px">申请开票</a-button>
            <a-button color="warning" preIcon="ant-design:export-outlined" @click="tsBill">特殊开票</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!--引用表格 :rowSelection="rowSelection"-->
  <BasicTable @register="registerTable" :loading="loading" :rowSelection="rowSelection"></BasicTable>
  <!-- table区域-end v-auth="'business:delete'"-->

  <OpenAccountAdd @register="registerOpenAccountAdd" @success="searchQuery"></OpenAccountAdd>
  <OpenAccountTsBill @register="registerOpenAccountTsBill" @success="searchQuery"></OpenAccountTsBill>

</template>

<script lang="ts" setup name="invoiceList-openAccountList">
import { ref, unref, reactive, toRaw } from "vue";
import { BasicColumn, BasicTable } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { openAccountList } from "./types/invoice.api";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import { useMessage } from "/@/hooks/web/useMessage";
import { render } from "/@/utils/common/renderUtils";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import OpenAccountAdd from './modules/openAccountAdd.vue'
import OpenAccountTsBill from './modules/openAccountTsBill.vue'

//初始化 -------------------------------------------------------------
const { createMessage: $message } = useMessage();
//定义查询表单，查询条件
const queryParam = reactive<any>({
  ddlxIds: [],
  sflx: '1',
  beginDate : momentSearchQueryDate('sub', 60),
  endDate: momentSearchQueryDate('add', 0),
  sdate: '0',
  shbj: '0',
});

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}

//初始化 -------------------------------------------------------------
function searchQuery() {
  setSelectedRowKeys([]);
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

const dwmc = ({ text, record }) => {
  if (record.sflx == "1") {
    text = record.customerPathName
  } else {
    text = record.cooperatorPathName
  }
  if (!text) {
    return "";
  } else {
    return text;
  }
};

//订单列表 - 表头
const columns: BasicColumn[] = [
  { title: "部门", align: "center", dataIndex: "ddlx", width: 60, customRender:({text}) => render.renderDict(text, 'ddlxType') },
  { title: "订单号", align: "center", dataIndex: "orderId", width: 95, className:"text-red-500" },
  { title: "收款单位", align: "left", dataIndex: "dwmc", width: 200, customRender: dwmc, ellipsis: true },
  { title: "收入", align: "right", dataIndex: "skje", width: 70, className:"text-red-500" },
  { title: "支出", align: "right", dataIndex: "fkje", width: 70, className:"text-green-500" },
  { title: "收付时间", align: "center", dataIndex: "sfsj", format: "date|YYYY-MM-DD", width: 80 },
  { title: "银行", align: "left", dataIndex: "djm", width: 80 },
  { title: "备注", align: "left", dataIndex: "bz", width: 250 },
  { title: "操作人", align: "center", dataIndex: "lrr", width: 60 },
]

// 列表页面公共参数、方法
const loading = ref<boolean>(false);
const {prefixCls, tableContext} = useListPage({
  designScope: 'invoice-list-open',
  tableProps: {
    rowKey: "id",
    api: openAccountList,
    columns: columns,
    showIndexColumn: false,    //行号
    clickToRowSelect: true,    //点击选择
    showActionColumn: false,
    showTableSetting: false,
    useSearchForm: false,
    showSummary: false,
    beforeFetch: (params) => Object.assign(params, unref(queryParam)),
  },
})

// 注册table数据
const [registerTable, {reload, setProps, setSelectedRowKeys}, {rowSelection, selectedRows}] = tableContext

// 开票申请 - 组件 -------------------------
const [registerOpenAccountAdd, { openModal: openAccountAdd }] = useModal();
// 开票申请 - 勾选 -------------------------
function auditALLSelect() {
  //1、获取被选中的行信息
  let rows = unref(selectedRows)
  if (rows.length <= 0) {
    //请勾选不能为空！
    $message.warning("请选择")
    return false
  }

  //2、判断选中的单位是否是同一家
  var pId = [], ids = ''
  for (var i = 0; i < rows.length; i++) {
    pId.push(rows[i].coopId) //customerId
    if (i == 0) {
      ids = rows[i].id;
    } else {
      ids = ids + "," + rows[i].id;
    }
  }
  if (pId.length > 0) {
    pId = pId.sort()
    for (var i = 0; i < pId.length - 1; i++) {
      if (pId[i] != pId[i + 1]) {
        $message.warning('请选择同一家供应商，进行付款款申请审核操作！')
        return false
      }
    }
  }
  openAccountAdd(true, {ids});
}

// 特殊开票 - 组件 -------------------------
const [registerOpenAccountTsBill, { openModal: openAccountTsBill }] = useModal();

//特殊开票
function tsBill() {
  openAccountTsBill(true, {isUpdate: true} );
}

</script>
<style lang="less" scoped>

</style>
